<template>
  <div >
     <el-col :span="10">
      <el-row>
        <el-col :span="1">h:</el-col>
        <el-col :span="14">
          <el-slider
          v-model="hsvData[0]"
          :max = "360"
          :step="1"
          style="width: 200px;"
          @input="hLowerChange">
          </el-slider>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="1">s:</el-col>
        <el-col :span="14">
          <el-slider
          v-model="hsvData[1]"
          :max = "1"
          :step="0.01"
          style="width: 200px;"
          @input="hLowerChange">
          </el-slider>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="1">v:</el-col>
        <el-col :span="14">
          <el-slider
          v-model="hsvData[2]"
          :max = "1"
          :step="0.01"
          style="width: 200px;"
          @input="hLowerChange">
          </el-slider>
        </el-col>
      </el-row>
     </el-col>
     <el-col :span="7" style="padding-left: 30px;">
       <el-color-picker v-model="hsvColor" color-format="hsv" style="margin: 40%;"  @active-change="activeChange"></el-color-picker>
     </el-col>
  </div>
</template>

<script>

export default {
  name: 'ColorPicker',
  //import 引入的组件需要注入到对象中才能使用
  props: {value:Array},
  data() {
    return {
      // hsv 数据 [260,0.3,0.5]
      hsvData: this.value,
      hsvColor:""
    };
  },
  //方法集合
  methods: {
    // 处理进度条改变
    hLowerChange(val) {
      // 将[260,0.3,0.5]转换成hsv(260,30%,50%)
      this.hsvColor = `hsv(${this.hsvData[0]},${this.hsvData[1]*100}%,${this.hsvData[2]*100}%)`
      this.$emit('input', this.hsvData)
    },
    // hsv 转 rgb
    hsv2rgb(h, s, v) {
        let i, f, p1, p2, p3;
        let r = 0, g = 0, b = 0;
        if (s < 0) s = 0;
        if (s > 1) s = 1;
        if (v < 0) v = 0;
        if (v > 1) v = 1;
        h %= 360;
        if (h < 0) h += 360;
        h /= 60;
        i = Math.floor(h);
        f = h - i;
        p1 = v * (1 - s);
        p2 = v * (1 - s * f);
        p3 = v * (1 - s * (1 - f));
        switch(i) {
            case 0: r = v;  g = p3; b = p1; break;
            case 1: r = p2; g = v;  b = p1; break;
            case 2: r = p1; g = v;  b = p3; break;
            case 3: r = p1; g = p2; b = v;  break;
            case 4: r = p3; g = p1; b = v;  break;
            case 5: r = v;  g = p1; b = p2; break;
        }
        return 'rgb(' + Math.round(r * 255) + ',' + Math.round(g * 255) + ',' + Math.round(b * 255) + ')';
    },
    rgbToHsv(rgb) {
      const r = rgb[0] / 255;
      const g = rgb[1] / 255;
      const b = rgb[2] / 255;
      const max = Math.max(r, g, b);
      const min = Math.min(r, g, b);
      const delta = max - min;

      let h, s, v;

      // 计算色调（Hue）
      if (delta === 0) {
        h = 0;
      } else if (max === r) {
        h = ((g - b) / delta) % 6;
      } else if (max === g) {
        h = (b - r) / delta + 2;
      } else if (max === b) {
        h = (r - g) / delta + 4;
      }

      h = Math.round(h * 60);
      if (h < 0) {
        h += 360;
      }

      // 计算饱和度（Saturation）
      if (max === 0) {
        s = 0;
      } else {
        s = delta / max;
      }
      s = Math.round(s * 100)/100.0;
      // 计算亮度（Value）
      v = Math.round(max * 100)/100.0;
      return [h, s, v];
    },
    activeChange(val){
      // this.hsvColor  // hsv(260,30%,50%)
      console.log(val);
      const regex = /rgb\((\d+), (\d+), (\d+)\)/;
      const match = val.match(regex);
      if (match) {
        const red = match[1];
        const green = match[2];
        const blue = match[3];
        var  rgb = [];
        rgb.push(red);
        rgb.push(green);
        rgb.push(blue);
        this.hsvData  = this.rgbToHsv(rgb)
        this.$emit('input', this.hsvData)
        console.log(this.hsvData);
      } else {
        console.log('No match found');
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前 this 实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {

  }
}
</script>
<style  scoped></style>
